<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamic Table Rendering from JSON on Canvas</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
  #myCanvas {
    border: 1px solid #000;
    margin-top: 10px;
  }
</style>
</head>
<body>

Rows: <input type="number" id="rows" min="1" value="2">
Columns: <input type="number" id="columns" min="1" value="5">
<button id="generate">Generate Table</button>

<canvas id="myCanvas"></canvas>

<script>
function generateJsonData(rows, columns) {
  var jsonData = [];
  for (var i = 0; i < rows; i++) {
    var row = { "cells": [] };
    for (var j = 0; j < columns; j++) {
      row.cells.push({ "content": String.fromCharCode(65 + j) + (i + 1), "width": 160, "height": 40, "borderSize": 1, "showBorder": true });
    }
    jsonData.push(row);
  }
  return jsonData;
}

function drawTableFromJson(jsonData) {
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  canvas.width = jsonData[0].cells.reduce((acc, cell) => acc + cell.width, 0);
  canvas.height = jsonData.length * jsonData[0].cells[0].height;
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  var currentX = 0;
  var currentY = 0;

  jsonData.forEach(function(rowData, rowIndex) {
    currentX = 0;
    rowData.cells.forEach(function(cell) {
      if (cell.showBorder) {
        ctx.strokeRect(currentX, currentY, cell.width, cell.height);
      }
      ctx.textAlign = "center";
      ctx.textBaseline = "middle";
      ctx.fillText(cell.content, currentX + cell.width / 2, currentY + cell.height / 2);
      currentX += cell.width;
    });
    currentY += rowData.cells[0].height;
  });
}

document.getElementById('generate').addEventListener('click', function() {
  var rows = parseInt(document.getElementById('rows').value, 10);
  var columns = parseInt(document.getElementById('columns').value, 10);
  var jsonData = generateJsonData(rows, columns);
  drawTableFromJson(jsonData);
});

// Initial draw
$(document).ready(function() {
  var rows = parseInt(document.getElementById('rows').value, 10);
  var columns = parseInt(document.getElementById('columns').value, 10);
  var jsonData = generateJsonData(rows, columns);
  drawTableFromJson(jsonData);
});
</script>

</body>
</html>
